<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 RDP专用聊天室</title>
    <link href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'SF Pro Display', Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f4f4f4;
        }

       .container {
            max-width: 400px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

       .container h1 {
            text-align: center;
            color: #333;
        }

       .form-group {
            margin-bottom: 15px;
        }

       .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }

       .form-group input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 3px;
            transition: border-color 0.3s ease;
        }

       .form-group input:focus {
            outline: none;
            border-color: #0078d7;
        }

       .form-group input:invalid {
            border-color: red;
        }

       .form-group button {
            width: 100%;
            padding: 10px;
            background-color: #0078d7;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

       .form-group button:hover {
            background-color: #005a9e;
        }

       .form-group small {
            color: #666;
        }

       .form-group.error {
            color: red;
            font-size: 0.8em;
        }

       .chat-container {
            display: none;
            width: 600px;
            height: 400px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

       .chat-header {
            background-color: #0078d7;
            color: white;
            padding: 10px;
            text-align: center;
            position: relative;
        }

       .chat-messages {
            height: 300px;
            overflow-y: scroll;
            padding: 10px;
        }

       .chat-message {
            margin-bottom: 10px;
            padding: 5px;
            border-radius: 5px;
        }

       .chat-message.me {
            background-color: #e0f2ff;
            text-align: right;
        }

       .chat-message.other {
            background-color: #f4f4f4;
        }

       .chat-input {
            padding: 10px;
            display: flex;
        }

       .chat-input input {
            flex: 1;
            margin-right: 10px;
        }

       .chat-input button {
            padding: 8px 15px;
            background-color: #0078d7;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

       .chat-input button:hover {
            background-color: #005a9e;
        }

       .captcha-container {
            margin-bottom: 10px;
        }

       .captcha-container img {
            width: 100%;
        }

       .footer {
            text-align: center;
            margin-top: auto;
            padding: 10px;
            color: #666;
        }

       .admin-operations {
            margin-top: 20px;
        }

       .admin-operations button {
            margin-right: 10px;
        }

       .search-container {
            margin-top: 10px;
            display: flex;
        }

       .search-container input {
            flex: 1;
            margin-right: 10px;
        }

       .user-list-container {
            margin-top: 10px;
        }

       .user-list-container ul {
            list-style-type: none;
            padding: 0;
        }

       .user-list-container ul li {
            cursor: pointer;
            padding: 5px;
        }

       .user-list-container ul li:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>

<body>
    <div class="container" id="loginContainer">
        <h1>聊天室登录</h1>
        <form id="loginForm">
            <div class="form-group">
                <label for="username">用户名：</label>
                <input type="text" id="username" placeholder="请输入用户名" required>
                <small>请输入有效的用户名</small>
            </div>
            <div class="form-group">
                <label for="password">密码：</label>
                <input type="password" id="password" placeholder="请输入密码" required>
                <small>请输入正确的密码</small>
            </div>
            <div class="captcha-container">
                <img id="captchaImage" src="captcha.php" alt="验证码">
            </div>
            <div class="form-group">
                <label for="captcha">验证码：</label>
                <input type="text" id="captcha" placeholder="请输入验证码" required>
                <small>请输入正确的验证码</small>
            </div>
            <div class="form-group">
                <button type="submit">登录</button>
            </div>
        </form>
        <div id="errorMessages" class="error"></div>
        <p style="text-align: center; cursor: pointer;" onclick="showRegister()">没有账号？点击注册</p>
    </div>

    <div class="container" id="registerContainer" style="display: none;">
        <h1>聊天室注册</h1>
        <form id="registerForm">
            <div class="form-group">
                <label for="newUsername">用户名：</label>
                <input type="text" id="newUsername" placeholder="请输入用户名" required>
                <small>请输入有效的用户名</small>
            </div>
            <div class="form-group">
                <label for="newPassword">密码：</label>
                <input type="password" id="newPassword" placeholder="请输入密码" required>
                <small>请输入有效的密码</small>
            </div>
            <div class="form-group">
                <label for="confirmPassword">确认密码：</label>
                <input type="password" id="confirmPassword" placeholder="请再次输入密码" required>
                <small id="passwordMatchError" class="error" style="display: none;">两次输入的密码不一致</small>
            </div>
            <div class="captcha-container">
                <img id="captchaImageRegister" src="captcha.php" alt="验证码">
            </div>
            <div class="form-group">
                <label for="captchaRegister">验证码：</label>
                <input type="text" id="captchaRegister" placeholder="请输入验证码" required>
                <small>请输入正确的验证码</small>
            </div>
            <div class="form-group">
                <button type="submit">注册</button>
            </div>
        </form>
        <div id="registerErrorMessages" class="error"></div>
        <p style="text-align: center; cursor: pointer;" onclick="showLogin()">已有账号？点击登录</p>
    </div>

    <div class="chat-container" id="chatContainer">
        <div class="chat-header" id="chat-header">
            <span id="usernameDisplay"></span>
            <span id="adminBadge" style="display: none;">[管理员]</span>
        </div>
        <div class="chat-messages" id="chatMessages"></div>
        <div class="chat-input">
            <input type="text" id="chatInput" placeholder="请输入消息">
            <button id="sendButton">发送</button>
        </div>
        <div class="admin-operations" id="adminOperations" style="display: none;">
            <button id="deleteUserButton">删除用户</button>
            <button id="changePasswordButton">更改用户密码</button>
            <button id="logoutButton">注销</button>
        </div>
    </div>

    <div class="footer">
        代码维护及开发完善：scicat<br>
        HTML5 RDP专用聊天室版本v1.0.0<br>
        本站由本站搭建者所有
    </div>

    <script>
        function showRegister() {
            document.getElementById('loginContainer').style.display = 'none';
            document.getElementById('registerContainer').style.display = 'block';
        }

        function showLogin() {
            document.getElementById('registerContainer').style.display = 'none';
            document.getElementById('loginContainer').style.display = 'block';
        }

        document.getElementById('registerForm').addEventListener('submit', function (e) {
            e.preventDefault();
            const newPassword = document.getElementById('newPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            const passwordMatchError = document.getElementById('passwordMatchError');

            if (newPassword!== confirmPassword) {
                passwordMatchError.style.display = 'block';
                return;
            }

            const newUsername = document.getElementById('newUsername').value;
            const captcha = document.getElementById('captchaRegister').value;
            // 后续发送注册请求等逻辑...
            // 这里可以使用fetch等方式将数据发送到register.php进行后端验证和处理
        });

        document.getElementById('loginForm').addEventListener('submit', function (e) {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const captcha = document.getElementById('captcha').value;
            // 后续发送登录请求等逻辑...
        });
    </script>
    <script src="client.js"></script>
</body>

</html>
